<template>
	<view class="bossGame">
		<gameBasics backgroundColor="rgba(0,0,0,0)" />
		<view class="bg">

		</view>
		<view class="" v-if="game_chall[0].team_id==userPeople.teamId&&userPeople.cap_zt==2"
			style="display: flex;flex-direction: column;justify-content: space-around;height: 100vh;">
			<view class="team_information">
				<image :src="game_chall[0].teamList.pic" mode="aspectFill"></image>
				<text>{{game_chall[0].teamList.title}}</text>
			</view>

			<view class="num">
				<u-icon name="minus-circle-fill" color="#F9CC68" size="calc(120vmin / 7.5)" @click="reduce"
					@touchstart="onTouchStart('reduce')" @touchend="onTouchEnd"></u-icon>
				<view class="text">
					{{num}}
				</view>
				<u-icon name="plus-circle-fill" color="#F9CC68" size="calc(120vmin / 7.5)" @click="add"
					@touchstart="onTouchStart('add')" @touchend="onTouchEnd"></u-icon>
			</view>
			<block v-if="restraint">
				<view class="" style="text-align: center;color: #AC7D3D;font-size: calc(52vmin / 7.5);font-weight:700;">
					得分
				</view>
				<view class="btn" @click="submit">
					OK
				</view>
			</block>
			<view v-else  style="font-size: calc(28vmin / 7.5);color: #333333;margin: auto;">
				{{`等待其他队长确认`}}
				
			</view>

		</view>

		<view class="await" v-else>
			等待 "{{game_chall[0].teamList.title}}队长" 上传战绩
		</view>
		<gameLoading />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				gameData: {},
				game_chall: [],
				userPeople: {},
				num: 1,
				longPressTimer: null,
				eliminate: false,
				acceptStatus: true,	
				restraint: true
			}
		},
		computed: {
			numText() {
				let num = this.num
				let l = 0;
				while (num >= 1) {
					num = num / 10;
					l++;
				}
				l = 3 - l
				for (let i = 0; i < l; i++) {
					if (i < 2) this.num = '0' + this.num
				}
			}
		},
		onUnload() {
			this.acceptStatus = false
			// uni.$off('onMessage') 
		},

		mounted() {
			let page = getCurrentPages();
			let currentRoute = page[page.length - 1].route
			uni.$on('onMessage', (res) => {
				if(!this.acceptStatus) return;
					this.$nextTick(() => {
						this.$store.commit('switchGame', {
							code: false
						})
					})
					
					if (res.data.code != 202) return;
					this.game_config = res.data.game_config
					this.gameData = res.data.game
					this.game_chall = res.data.game_chall
					if(this.game_chall[0].result_confirm){
						this.restraint = !this.game_chall[0].result_confirm.some(item => item.count ==
						0)
					}else{
						this.restraint =true
					}
					
					this.userPeople = res.data.userPeople
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
					if(!this.$ws.socketTask) return this.$ws.init();
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});

		},
		methods: {
			submit() {
				let data = {
					game_id: this.gameData.id,
					activ_id: this.game_config.activ_id,
					team_id: this.userPeople.teamId,
					number: ~~this.num
				}
				let url='home/game/game_end'
				if(this.userPeople.type==11||this.userPeople.type==12){
					url='home/game/bingo_do'
					data.key=this.userPeople.activ_list.key
				} 
				this.$myRuquestWs(url, data)

			},
			reduce() {
				if (this.num == 0) return;
				this.num--
			},
			add() {
				this.num++
			},
			longPressStep(type) {
				// 每隔一段时间，重新调用longPressStep方法，实现长按加减
				if (!this.eliminate) return;
				this.clearTimeout()
				this.longPressTimer = setTimeout(() => {
					this[type]()
					this.longPressStep(type)
				}, 50);
			},
			onTouchStart(type) {
				this.clearTimeout()
				// 一定时间后，默认达到长按状态
				this.longPressTimer = setTimeout(() => {
					this.eliminate = true
					this[type]()
					this.longPressStep(type)
				}, 600)
			},
			// 触摸结束，清除定时器，停止长按加减
			onTouchEnd() {
				this.clearTimeout()
				this.eliminate = false

			},
			// 清除定时器
			clearTimeout() {
				clearTimeout(this.longPressTimer)
				this.longPressTimer = null

			}
		}
	}
</script>

<style lang="scss" scoped>
	.await {
		font-size: calc(46vmin / 7.5);
		font-weight: 700;
		height: 100vh;
		line-height: 100vh;
		text-align: center;
	}

	.num {
		display: flex;
		justify-content: center;

		.text {
			width: calc(512vmin / 7.5);
			height: calc(300vmin / 7.5);
			font-size: calc(200vmin / 7.5);
			font-weight: 700;
			border-radius: calc(38vmin / 7.5);
			line-height: calc(300vmin / 7.5);
			text-align: center;
			margin: 0 calc(50vmin / 7.5);
			background-image: linear-gradient(to top, rgba(249, 204, 104, 1), rgba(249, 204, 104, 0), rgba(249, 204, 104, 0), rgba(249, 204, 104, 1));
		}

	}

	.btn {
		background-color: #F9CC68;
		width: calc(270vmin / 7.5);
		height: calc(82vmin / 7.5);
		line-height: calc(82vmin / 7.5);
		margin: 0 auto;
		border-radius: calc(16vmin / 7.5);
		color: #fff;
		border: calc(8vmin / 7.5) solid #EBAC20;
		box-shadow: 0 0 calc(12vmin / 7.5) #EBAC20;
		text-align: center;
	}

	.bg {
		margin: 0;
		padding: 0;
		min-height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;

		background-color: rgba(249, 204, 104, .8);
		overflow: hidden;
	}

	.bg::before,
	.bg::after {
		content: '';
		position: absolute;
		bottom: 15vh;
		min-width: 300vw;
		min-height: 300vw;
		background-color: #fff;
		animation: rote 10s linear infinite;
	}

	.bg::before {
		left: -95%;
		border-radius: 45%;
		opacity: .5;
	}

	.bg::after {
		left: -95%;
		border-radius: 46%;
	}

	@keyframes rote {
		from {
			transform: rotateZ(0);
		}

		to {
			transform: rotateZ(360deg);
		}
	}
</style>
